<template>
  <div class="shoppingcart-container">
    <div class="cartItem-list">
      <!-- 购物车产品列表 -->
      <div class="mui-card" v-for="item in cartItemList" :key="item.prodId">
        <div class="mui-card-content">
          <div class="mui-card-content-inner">
            <mt-switch></mt-switch>
            <img src="http://demo.dtcms.net/upload/201504/20/thumb_201504200046589514.jpg" />

            <div class="item-info">
              <h1>{{ item.prodTitle }}</h1>
              <p>
                <span class="price">￥{{item.prodPrice}}</span>
                <!-- <cart-numbox></cart-numbox> -->
                <a href="#" @click.prevent="deleteCartItem(item.prodId)">删除</a>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 购物车结算 -->
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <div class="left">
            <p>总计（不含运费）</p>
            <p>
              已勾选商品
              <span class="red">{{$store.getters.getTotalQty}}</span> 件， 总价
              <span class="red">￥{{$store.getters.getTotal}}</span>
            </p>
          </div>
          <mt-button type="danger">去结算</mt-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import cartnumbox from "../subcomps/CartQtySelector.vue";
export default {
  data() {
    return {
      cartItemList: []
    };
  },
  created() {
    this.cartItemList = this.$store.getters.getAllItems;
  },
  components: {
    "cart-numbox": cartnumbox
  },
  methods: {
    
    // 删除购物车中的元素
    deleteCartItem(prodId){
      console.log(prodId);
      
      this.$store.commit('deleteCartItem',prodId);
    }
  },
};
</script>

<style lang="scss" scoped>
.shoppingcart-container {
  .cartItem-list {
    .mui-card-content-inner {
      display: flex;

      .item-info {
        h1 {
          font-size: 14px;
        }

        .price{
          color: red;
        }
      }

      .left{

        .red{
          color: red;
        }
      }
    }

    img {
      width: 70px;
    }
  }
}
</style>>